<template>
	<view class="input_lease">
		<view class="lease_header">
			<option-state num="0" :option="leaseOption" active="0" :isno="true"></option-state>
		</view>
		<view class="input_lease_info">
			<u--form labelPosition="left" :model="model1" ref="uForm" labelWidth="100">
				<u-form-item label="房源名称" borderBottom>
					<template slot="right">
						{{ houseName }}
					</template>
				</u-form-item>
				<u-form-item label="出租类型" borderBottom>
					<template slot="right">
						<view class="slot_floor">
							<view :class="['item', model1.userInfo.rentalType == 0 ? 'active_floor' :'']"
								@click="model1.userInfo.rentalType = 0">合租
							</view>
							<view :class="['item', model1.userInfo.rentalType == 1 ? 'active_floor' :'']"
								@click="model1.userInfo.rentalType = 1">整租
							</view>
						</view>
					</template>
				</u-form-item>
			 	<u-form-item label="房东姓名" borderBottom>
					<u--input v-model="model1.userInfo.landlordName" border="none" type="text" maxlength="5"
						placeholder="请输入房东姓名" inputAlign="right" :disabled="true"></u--input>
				</u-form-item>
				<u-form-item label="房东手机号" borderBottom>
					<u--input v-model="model1.userInfo.landlordPhone" border="none" type="text" maxlength="11"
						placeholder="请输入房东手机号" inputAlign="right" :disabled="true"></u--input>
				</u-form-item>
				<u-form-item label="房东身份证" borderBottom>
					<u--input v-model="model1.userInfo.landlordIdCard" border="none" type="text" maxlength="18"
						placeholder="请输入房东身份证" inputAlign="right" :disabled="true"></u--input>
				</u-form-item> 
				<u-form-item label="租客姓名" borderBottom>
					<u--input v-model="model1.userInfo.tenantName" border="none" typ="number" maxlength="5"
						placeholder="请输入租客姓名" inputAlign="right"></u--input>
				</u-form-item>
					
				<u-form-item label="租客性别" borderBottom>
					<template slot="right">
						<view class="slot_floor">
							<view :class="['item', model1.userInfo.tenantGender == 0 ? 'active_floor' :'']"
								@click="model1.userInfo.tenantGender = 0">男
							</view>
							<view :class="['item', model1.userInfo.tenantGender == 1 ? 'active_floor' :'']"
								@click="model1.userInfo.tenantGender = 1">女
							</view>
						</view>
					</template>
				</u-form-item>
				<u-form-item label="租客手机号码" borderBottom>
					<u--input v-model="model1.userInfo.tenantPhone" border="none" maxlength="11" type="number"
						placeholder="请输入租客手机号码" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="证件类型" borderBottom>
					<view class="" slot="right">
						身份证
					</view>
				</u-form-item>
 
				<u-form-item label="证件号码" borderBottom @click="showID = true">
					<view class=""  @click="showID = true" style="width: 100%; text-align: right;">
						<view class="" v-if="model1.userInfo.tenantIdCard =='' " style="color: #7f7f7f;">
							请输入证件号码
						</view>
						<view class="" v-else>
							{{ model1.userInfo.tenantIdCard }}
						</view>
						<!-- <u-input v-model="model1.userInfo.tenantIdCard" border="none" placeholder="请输入证件号码" type="idcard"
							inputAlign="right" maxlength="18" disabled @click="showID = true" ></u-input> -->
					</view>
				</u-form-item>
				<u-form-item label="证件照片" borderBottom>
					<Upload @change="changeUrl" num="1" type="img"></Upload>
				</u-form-item>
				<u-form-item label="入住人数" borderBottom>
					<u-number-box slot="right" :min="1" :max="100" integer :value="model1.userInfo.peopleNumber"
						@change="peopleNumberChnage"></u-number-box>
				</u-form-item>
				<u-form-item label="租期/月" borderBottom>
					<u-number-box slot="right" :min="1" :max="100" integer :value="model1.userInfo.tenancyTerm"
						@change="tenancyTermChange"></u-number-box>
				</u-form-item>
				<u-form-item label="租金" borderBottom>
					<u--input v-model="model1.userInfo.rent" border="none" type="number" maxlength="5"
						placeholder="请输入租金" inputAlign="right"></u--input>
					<view slot="right">元/月</view>
				</u-form-item>
				<u-form-item label="押金" borderBottom>
					<u--input v-model="model1.userInfo.deposit" border="none" placeholder="请输入押金" type="number"
						inputAlign="right" maxlength="5"></u--input>
					<view slot="right">元</view>
				</u-form-item>
				<u-form-item label="起租日">
					<template slot="right">
						<view class="form_item" @click="pickerIsShow = true" > 
							{{ datevALUE(model1.userInfo.beginDate) || "请选择起租日" }}
							<!-- {{ model1.userInfo.beginDate }} -->
							<u-icon name="arrow-right" style="float: right;"></u-icon>
						</view>
					</template>
				</u-form-item>
				<u-form-item label="终止日" borderBottom>
					<template slot="right">
						<view class="form_item" style="color: #c7c7c7;">
							{{ datevALUE(model1.userInfo.endDate) || '终止日' }}
							<!-- {{ endDate }} -->
							<!-- <u-icon name="arrow-right" style="float: right;"></u-icon> -->
						</view>
					</template>
				</u-form-item>
				<u-form-item label="租约签署日期" borderBottom>
					<template slot="right">
						<view class="form_item" @click="pickerIsShow2 = true">
							{{ datevALUE(model1.userInfo.signedOn) || '' }}
							<u-icon name="arrow-right" style="float: right;"></u-icon>
						</view>
					</template>
				</u-form-item>
				<u-form-item label="收租方式" borderBottom>
					<template slot="right">
						<view class="" style="width: 300rpx;">
							<uni-data-select v-model="model1.userInfo.rentPayMode " :localdata="rentalModeRange"
								@change="model1.userInfo.rentPayMode = $event" :clear="false"></uni-data-select>
						</view>
					</template>
				</u-form-item>

				<u-form-item label="提前交租天数" borderBottom>
					<u-number-box slot="right" :min="1" :max="7" integer :value="model1.userInfo.rentDay"
						@change="rentDayChange"></u-number-box>
				</u-form-item>
				<u-form-item label="上传纸质合同(可选)" borderBottom>
					<upload @change="uploadImg" num="15" type="img"></upload>
				</u-form-item>
				<u-form-item label="补充约定" borderBottom >
					<template slot="right">
						<view style="margin-left: auto;display: flex;align-items: color: #000;" @click="clickShowPopup">
							<!-- <u-input v-model="valueInput" :disabled="true" border="none" placeholder="请选择"
								inputAlign="right" disabledColor="#fff" @click="clickShowPopup"></u-input> -->
								<view class="">
								    {{ valueInput }}
								</view>
							<u-icon name="arrow-right" color="#c1c3c8" size="18"></u-icon>
						</view>
					</template>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="lease">
						1、合同租期内承租人为房屋实际管理人，房屋仅限合同本人

						居住，未经许可房屋不得转借他人居住或留宿，明令禁止使

						用如小太阳等各类大功率电器（后果自负）。<br />

						2、绝对禁止电动车上楼充电（发生意外后果自负）。<br />

						3、禁止在墙面张贴打孔，保持房屋原样，否则赔偿翻新维修

						费用。禁宠。出合同期限视为自动续约。<br />

						4、如补充协议和上面发生冲突，以补充协议为准！<br />

						5、退房需保洁干净，否则扣相应保洁费用。<br />

						6、不得携带宠物<br />

						7、仅用于居住、不得用于办公。<br />

						8、承租人已知晓并遵守以下补充协议：房屋租期内发生任何意

						外，由承租人负责与出租方无关。禁止在墙面张贴打孔，退

						房需打扫干净，否则扣除清洁费300元
						<view v-html="supaAreement">
							{{model1.userInfo.supaAreement}}
						</view>

					</view>
				</u-form-item>
				<u-form-item label="其他补充约定" borderBottom>
					<u--textarea v-model="model1.userInfo.additionalProvisions" placeholder="请输入内容"></u--textarea>
				</u-form-item>
			</u--form>

			<view class="submint_btn">
				<view class="submin_box">
					<u-button color="#f05a23" text="确定" @click="leaseHouse"></u-button>
				</view>
			</view>
		</view>
		<!-- 		<u-calendar :show="pickerIsShow" @confirm="changePicker" showLunar monthNum="24" @close="pickerIsShow = false"
			closeOnClickOverlay></u-calendar>
		<u-calendar :show="pickerIsShow1" @confirm="changePickerendDate" showLunar monthNum="24"
			@close="pickerIsShow1 = false" closeOnClickOverlay></u-calendar>
		<u-calendar :show="pickerIsShow2" @confirm="changePickerendDate1" showLunar monthNum="24"
			@close="pickerIsShow2 = false" closeOnClickOverlay></u-calendar> -->
		<u-datetime-picker ref="datetimePicker" :show="pickerIsShow" v-model="value1" mode="date" :formatter="formatter"
		 @cancel="pickerIsShow = false" @confirm="changePicker"></u-datetime-picker>
		 <u-datetime-picker ref="datetimePicker" :show="pickerIsShow1" v-model="value1" mode="date" :formatter="formatter"
		  @cancel="pickerIsShow1 = false" @confirm="changePickerendDate"></u-datetime-picker>
		  <u-datetime-picker ref="datetimePicker" :show="pickerIsShow2" v-model="value1" mode="date" :formatter="formatter"
		   @cancel="pickerIsShow2 = false" @confirm="changePickerendDate1"></u-datetime-picker>
		<u-popup :show="showPopup" mode="bottom" @close="close">
			<view class="header">
				<view class="name" @click="close">
					取消
				</view>
				<view class="name" @click="sure">
					确定
				</view>
			</view>
			<view class="popup">

				<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
					<u-checkbox shape="circle" :customStyle="{margin: '10px',textAlign:'center'}"
						v-for="(item, index) in checkboxList1" :key="index" :label="item.name" :name="item.name">
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	<u-keyboard mode="card" @confirm="showID = false" @change="valChange" @backspace="backspace" :show="showID" safeAreaInsetBottom closeOnClickOverlay @cancel="showID = false"></u-keyboard>

	</view>
</template>

<script>
	import OptionState from "@/pages/home/components/optionState.vue"
	import Upload from "@/components/Upload/index.vue"
	import {
		houseAll,
		getAvailability
	} from "@/api/house/index.js"
	import {formatDate, handleEndDate} from "@/utils/formatDate.js"
	import {
		addLease,
		getLandlordInfo
	} from "@/api/lease/index.js"
	import uniDataSelect from "@/uni_modules/uni-select/index/index.vue"
	export default {
		data() {
			return {
				endDate: "",
				showID: false,
				houseISshowxiaoqu: false,
				xiaoquhouseList: [],
				value1: Number(new Date()),
				id: 0,
				value: '',
				supaAreement:'',
				List: [],
				valueInput: '添加',
				houseName: "",
				showPopup: false,
				checkboxValue1: [],
				conventionsList: [],
				// 基本案列数据
				checkboxList1: [{
						name: '不得携带宠物',
						disabled: false
					},
					{
						name: '不可居住孕妇',
						disabled: false
					},
					{
						name: '不可居住老人',
						disabled: false
					},
					{
						name: '不可居住小孩',
						disabled: false
					},
					{
						name: '仅用于居住、不可用于办公',
						disabled: false
					}, {
						name: '退房需要打扫房屋、保持整洁',
						disabled: false
					}
				],
				rentalModeRange: [{
						value: 1,
						text: "一月一付"
					},
					{
						value: 2,
						text: "二月一付"
					},
					{
						value: 3,
						text: "三月一付"
					},
					{
						value: 6,
						text: "半年一付"
					},
					{
						value: 12,
						text: "一年一付"
					}
				],
				ADDRESSNAME: "",
				pickerIsShow: false,
				pickerIsShow1: false,
				pickerIsShow2: false,
				houseISshow: false,
				leasePeriod: ["1年", "6个月", "3个月", "1个月"],
				period: 0,
				stylesIcon: {
					color: "#fff",
					// backgroundColor: "#2979ff"
				},
				rentState: 1,
				leaseOption: ["新签纸质租约", "新签电子租约"],
				houseInfo: {},
				showSex: false,
				// six: 0,
				model1: {
					userInfo: {
						landlordId:'',
						landlordName:'',
						landlordPhone:'',
						landlordIdCard:'',
						leaseType: 0,
						houseId: '',
						rentalType: 1,
						brokerId: "",
						tenantId: '',
						tenantName: '',
						tenantGender: '0', // 描述：租客性别0男1女
						tenantCardType: 0,
						tenantIdCard: '',
						tenantCardUrl: '',
						supaAreement: '',
						peopleNumber: 1,
						deposit: '',
						tenancyTerm: 12,
						beginDate: '',
						endDate: '',
						rentPayMode: '',
						rentDay: 1,
						additionalProvisions: '',
						mediaList: [],
						signedOn: '',

					},
				},
				radio: '',
				switchVal: false,
				houseInfoID: []
			};
		},
		onReady() {
			// 微信小程序需要用此写法
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onLoad(option) {
				
			this.model1.userInfo.houseId = JSON.parse(option.item).id;
			let rentalType = JSON.parse(option.item).rentalType
			this.houseName = JSON.parse(option.item).communityName
			if (rentalType == "1") {
				this.model1.userInfo.rentalType = 1
				this.houseName = JSON.parse(option.item).communityName +
					JSON.parse(option.item).buildingNumber + '幢/栋' +
					JSON.parse(option.item).unitNumber + '单元' +
					JSON.parse(option.item).ventricleNumber + '室'
			} else {
				this.model1.userInfo.rentalType = 0
				this.houseName = JSON.parse(option.item).communityName +
					JSON.parse(option.item).buildingNumber + '幢/栋' +
					JSON.parse(option.item).unitNumber + '单元' +
					JSON.parse(option.item).ventricleNumber + '室' +
					JSON.parse(option.item).roomNumber + '房间'

			}
			this.getLandlordInfo(this.model1.userInfo.houseId)


		},
		methods: {
			valChange(val) {
							// 将每次按键的值拼接到value变量中，注意+=写法
							if(this.model1.userInfo.tenantIdCard.length == 18) return 
							this.model1.userInfo.tenantIdCard += val;
							// console.log(this.value);
						},
						// 退格键被点击
						backspace() {
							// 删除value的最后一个字符
							if(this.model1.userInfo.tenantIdCard.length) this.model1.userInfo.tenantIdCard = this.model1.userInfo.tenantIdCard.substr(0, this.model1.userInfo.tenantIdCard.length - 1);
							// console.log(this.value);
						},
			close() {
				this.showPopup = false
			},
			clickShowPopup() {
				this.showPopup = true
			},
			checkboxChange(e) {
				this.List = e
			},
			sure() {
				this.supaAreement = this.List.join('<br/>')
				this.showPopup = false
			},
			rentDayChange(value, name) {
				this.model1.userInfo.rentDay = value.value
			},
			peopleNumberChnage(value, name) {
				this.model1.userInfo.peopleNumber = value.value
			},
			tenancyTermChange(value, name) {
			 
				this.model1.userInfo.tenancyTerm = value.value;
				console.log(this.model1.userInfo.tenancyTerm);
				// console.log(this.model1.userInfo.tenancyTerm);
				// this.computedDateEnd()
				this.model1.userInfo.endDate = handleEndDate(this.model1.userInfo.beginDate || Date.parse(new Date()), parseInt(this.model1.userInfo.tenancyTerm))
			 
			},
			async leaseHouse() {
 
				let rentPayMode =  this.model1.userInfo.rentPayMode;
				let tenancyTerm =  this.model1.userInfo.tenancyTerm;
				if(rentPayMode>tenancyTerm){
					this.$refs.uToast.show({
						message: '收租周期不能大于租期',
						type: 'error'
					
					})
				}else{
					const res = await addLease(this.model1.userInfo);
					if (res.data.code != 200) return this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					
					})
					
					this.$refs.uToast.show({
						message: '添加成功',
						type: 'success'
					
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/my/lease/index'
						})
					}, 1000)
				}
				


			},

            async getLandlordInfo(houseId) {
				const res = await getLandlordInfo(houseId)
 
				this.model1.userInfo.landlordId=res.data.data.landlordId
				this.model1.userInfo.landlordIdCard=res.data.data.landlordIdCard
				this.model1.userInfo.landlordName=res.data.data.landlordName
				this.model1.userInfo.landlordPhone=res.data.data.landlordPhone
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			uploadImg(list) {
				this.model1.userInfo.mediaList = []
				list.map((item, index) => {
					let obj = {
						mediaUrl: item
					}
					this.model1.userInfo.mediaList.push(obj);
				})
				// this.model1.userInfo.leaseUrl = list.toString()
			},
			datevALUE(value) {
				if (value == "") return ""
				return formatDate(value, 12)
			},
			changePickerendDate(value) {
				this.model1.userInfo.endDate = value.value;
				this.pickerIsShow1 = false
			},
			changePickerendDate1(value) {
				this.model1.userInfo.signedOn = value.value;
				this.pickerIsShow2 = false
			},
			changePicker(value) {
				this.model1.userInfo.beginDate = value.value;
				this.pickerIsShow = false
				
				// this.computedDateEnd()
				this.model1.userInfo.endDate = handleEndDate(this.model1.userInfo.beginDate || Date.parse(new Date()), parseInt(this.model1.userInfo.tenancyTerm))
				console.log(this.endDate);
			},
			computedDateEnd() {
				 this.model1.userInfo.endDate = handleEndDate(this.model1.userInfo.beginDate, parseInt(this.model1.userInfo.tenancyTerm))
			},
			changeUrl(list) {
				this.model1.userInfo.tenantCardUrl = list[0]
			},

			
		},
		components: {
			"option-state": OptionState,
			Upload,
			uniDataSelect
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/styles/global.scss";
	@import "@/styles/index.scss";

	.active_floor {
		background-color: $theme;
		border: 1rpx solid $theme !important;
		color: #fff;
	}

	.lease {
		line-height: 2;
		background-color: #f7f6ff;
	}

	.header {
		background-color: #eeeeee;
		padding: 30rpx;
		@include flexBetween;

		.name {
			color: $theme;
			font-size: 32rpx;
		}
	}

	.popup {
		padding: 30rpx;

	}

	.submint_btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid #b9b9b9;
		left: 0rpx;

		.submin_box {
			margin: 30rpx auto;
			border-radius: 40rpx;
			overflow: hidden;
			width: 80%;

		}
	}

	.item {
		// float: right;
		display: inline-block;
		padding: 6rpx 12rpx;
		border: 1rpx solid #c8c8c8;
		margin-left: 10rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.form_item {
		// background-color: aquamarine;
		width: 300rpx;
		float: left;
		height: 40rpx;
	}

	.period_active {
		background-color: $theme;
		color: #fff;
		font-weight: bold;
	}


	.input_lease {
		// @include cover;
		// @include boxSing;
		padding-bottom: 150rpx;

		.lease_header {
			// padding-top: 30rpx;
			// @include boxSing;
		}

		.input_lease_info {
			padding: 0 30rpx;
			margin-top: 30rpx;
			background-color: #fff;

			// 识别
			.identify {
				text-align: right;
				font-size: 30rpx;
				height: 88rpx;
				line-height: 88rpx;
				// background-color: $pagebgc;
				color: $theme;
				border-bottom: 1rpx solid $pagebgc;

				.scan_box {
					display: inline-block;
					vertical-align: middle;
					margin-right: 5rpx;
				}
			}

			.period_box {
				width: 100%;
				height: 70rpx;
				padding-left: 130rpx;
				box-sizing: border-box;

				.period {
					float: left;
					padding: 8rpx 12rpx;
					border: 1rpx solid #e1e0e0;
					margin-right: 30rpx;
					// width: 70rpx;
					// height: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					border-radius: 10rpx;
				}

			}

		}
	}

	.radio_box {
		height: 100%;
		width: 100%;
		text-align: right;
		float: right
	}

	.submin_box {
		margin: 30rpx auto;
		border-radius: 40rpx;
		overflow: hidden;
		width: 80%;

	}
</style>